
<template>
    <div class="system-role-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog"  center class="borderRadius10" width="490">
            <section>
                <el-form ref="roleDialogFormRef" :rules="rules" :model="state.ruleForm" label-width="130px">
                    <el-form-item label="品牌名称：" prop="brandName">
                        <el-input v-model="state.ruleForm.brandName" class="width260" placeholder="请输入品牌方名称" />
                    </el-form-item>
                    <el-form-item label="品牌Logo(1:1)：">
                        <section @click="addImg('brandLogo', 0)">
                            <el-image v-if="state.ruleForm.brandLogo != '' && state.ruleForm.brandLogo != null" class="mr20 borderRadius5"
                                style="width:96px; height: 96px;" :src="state.ruleForm.brandLogo" fit="cover" />
                            <section v-else class="selector-img">
                                <el-icon size="30" color="#999"> <Plus />  </el-icon>
                            </section>
                        </section>
                    </el-form-item>
                    <el-form-item label="品牌商标(1:1)：">
                        <section @click="addImg('brandIcon', 0)">
                            <el-image v-if="state.ruleForm.brandIcon != '' && state.ruleForm.brandIcon != null" class="mr20 borderRadius5"
                                style="width:96px; height: 96px;" :src="state.ruleForm.brandIcon" fit="cover" />
                            <section v-else class="selector-img">
                                <el-icon size="30" color="#999"> <Plus /> </el-icon>
                            </section>
                        </section>
                    </el-form-item>
                    <el-form-item label="品牌方名称：">
                        <el-input v-model="state.ruleForm.company" class="width260" placeholder="请输入品牌方名称" />
                    </el-form-item>
                    <el-form-item label="品牌类型：" prop="isForeign">
                        <el-radio-group v-model="state.ruleForm.isForeign">
                            <el-radio :label=0>国产</el-radio>
                            <el-radio :label=1>进口</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-row justify="center" class="mt20">
                    <el-button @click="closeDialog"> 取消 </el-button>
                    <el-button type="primary" @click="onSubmitForm(roleDialogFormRef)"> 提交 </el-button>
                </el-row>
            </section>
        </el-dialog>
        <AddInformation ref="addInformationRef" @selectFun="selectFun" />
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref, defineAsyncComponent } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { brandUpSert } from "/@/api/commodity";

const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const addInformationRef = ref()
// 定义变量内容
const roleDialogFormRef = ref();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const state = reactive({
    loading: false,
    addFileType: '',
    dialog: {
        isShowDialog: false,
        type: 'add',
        title: '',
        submitTxt: '',
    },
    ruleForm: {
        brandId: null,
        brandName: '', // 模板名称
        brandLogo: '',
        brandIcon: '',
        company: '',
        isForeign: 0,
    },
})

const rules = reactive<FormRules<any>>({
    brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
    isForeign: [{ required: true, message: '请选择品牌类型', trigger: 'change' }],
    
})

// 打开弹窗
const openDialog = (type: string, row?: any) => {
    state.dialog.type = type;
    console.log(row)
    if (type === 'edit') {
        state.dialog.title = '品牌编辑';
        state.dialog.submitTxt = '修 改';
        state.ruleForm = {
            brandId: row.brandId,
            brandName: row.brandName, // 模板名称
            brandLogo: row.brandLogo,
            brandIcon: row.brandIcon,
            company:row.company,
            isForeign: row.isForeign,
        };
    } else {
        state.dialog.title = '品牌新增';
        state.dialog.submitTxt = '新 增';
        state.ruleForm = {
            brandId: null,
            brandName: '', // 模板名称
            brandLogo: '',
            brandIcon: '',
            company: '',
            isForeign: 0,
        };
    }
    state.dialog.isShowDialog = true;
};

const closeDialog = () => {
    state.dialog.isShowDialog = false;
}


const onSubmitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid: boolean) => {
        if (valid) {
            state.loading = true;
            let params = {
                brandId: state.ruleForm.brandId,
                brandName: state.ruleForm.brandName,
                brandLogo: state.ruleForm.brandLogo,
                brandIcon: state.ruleForm.brandIcon,
                company: state.ruleForm.company,
                isForeign: state.ruleForm.isForeign,
            }
            const { data } = await brandUpSert(params);
            ElMessage.success('提交成功');
            state.loading = false;
            emit('refresh');
            closeDialog();
        } else {
            return false;
        }
    });
};

// 图片选中
const addImg = (type: string, isArr: Number) => {
    state.addFileType = type;
    addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
    if (state.addFileType == 'brandLogo') {
        state.ruleForm.brandLogo = fileList[0]
    } else if (state.addFileType == 'brandIcon') {
        state.ruleForm.brandIcon = fileList[0]
    }
}

// 暴露变量
defineExpose({
    openDialog,
});

</script>

<style lang='scss' scoped>
.selector-img {
    width: 96px;
    height: 96px;
    border: 1px solid #ededed;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>